<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    :rules="rules"
  >
    <el-form-item prop="username">
      <el-input
        v-model="ruleForm.username"
        prefix-icon="el-icon-user"
        placeholder='请输入账号/手机号'
		  @keypress.native.enter="submitForm('ruleForm')"
      ></el-input>
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        v-model="ruleForm.password"
        show-password
        prefix-icon="el-icon-lock"
        placeholder='请输入登录密码'
		 @keypress.native.enter="submitForm('ruleForm')"
      ></el-input>
    </el-form-item>

    <el-form-item required>
      <el-col :span="16">
        <el-form-item prop="code">
          <el-input
            v-model="ruleForm.code"
            prefix-icon="el-icon-lock"
            placeholder='请输入图形验证码'
			 @keypress.native.enter="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        :style="{marginLeft: '20px'}"
      >
        <el-form-item prop="date2">
          <div
            class="phone-form-code"
            @click="getYZM(4)"
          >{{qrcode}}</div>
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item style="padding-bottom: 20px">
      <p
        class="phone-form-btn"
        @click="submitForm('ruleForm')"
      >登 录</p>
      <div style="width: 100%">
        <el-checkbox v-model="checked" style="float: left;margin-top: -2px">登录即代表您已阅读并同意该</el-checkbox>
        <a @click="seeShare"  style="float: right;margin-left: -1px;font-size: 13px;font-weight: bolder;margin-top: -3px"><span>《用户协议》</span></a>
<!--        <router-link :to="{name:'xieyi-detail'}">《用户协议》</router-link>-->
      </div>
    </el-form-item>

<!--    <el-form-item>-->
<!--      <el-checkbox v-model="checked">登录即代表您已阅读并同意该《用户协议》</el-checkbox>-->
<!--    </el-form-item>-->
  </el-form>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
import { mapMutations } from 'vuex';
// eslint-disable-next-line no-unused-vars
import { deleteAction, postAction, getAction } from '@/api/manage'
import Qs from "qs";

export default {
  data() {
    return {
      checked: false,
      drawer:false,
      content:'',
      qrcode: "",
      ruleForm: {
        password: "",
        username: "",
        code: "",
      },
      url: {
        show_data_token: '/user/interface/query_userInfoBytoken',
        login: '/user/interface/login',
        phone_pwd_login: '/user/interface/phone_password_login'
      },
      rules: {
        username: [
          { required: true, message: "请输入账号/手机号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入图形验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    tiao_userxieyi() {//跳转用户协议
      this.$router.replace({
        path: '/',
        name: 'xieyi-detail'
      })
      //  this.drawer=true;
      // let params2 = {
      //   msg_id:1
      // };
      // postAction(domain.publicUrl+"/logic/interface/query_messageDetail",Qs.stringify(params2)).then(res=>{
      //   let result = res.data;
      //   if(result.code==0){
      //     this.content = result.data.message;
      //   }
      // });
      // this.$router.push('/xieyi-detail');
    },
    seeShare(){
      localStorage.setItem("token", "123456");
      let routeUrl = this.$router.resolve({
        path: "/xieyi-detail",query: {id:6}
      });
      //let routeUrl = this.$router.resolve(`/share/${96}`)
      window.open(routeUrl.href, '_blank');
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.code === this.qrcode) {
            if(this.checked==false){
              this.$message.warning("请先勾选用户协议")
              // this.$notify.error({
              //   title: "提示",
              //   message: "请先勾选用户协议",
              //   duration: 1000,
              // });
              return;
            }
            var params = {username:this.ruleForm.username,password:this.ruleForm.password};
            if (/^1[3456789]\d{9}$/.test(this.ruleForm.username)) {//复合手机号--手机号登录
              // eslint-disable-next-line no-undef
              postAction(domain.publicUrl+this.url.phone_pwd_login,Qs.stringify(params)).then(res=>{
                var result = res.data;
                console.log(result)
                if(result.code==0){
                  this.$message.success("登录成功，欢迎回来！")
                  localStorage.setItem("token", result.data.token);
                  this.$router.replace({
                    path:'/',
                    name:'home'
                  })
                  localStorage.setItem("islogin", "1");
                }else{
                  this.$message.error(result.msg)
                  this.getYZM(4);
                }
              })
            }else {
              // eslint-disable-next-line no-undef
              postAction(domain.publicUrl+this.url.login,Qs.stringify(params)).then(res=>{
                var result = res.data;
                console.log(result)
                if(result.code==0){
                  this.$message.success("登录成功，欢迎回来！")
                  localStorage.setItem("token", result.data.token);
                  //保存当前时间以作登录计时
                  localStorage.setItem("lastTime",new Date().getTime());
                  // this.$router.replace({
                  //   path: this.$route.query.require || "/",
                  // });
                  this.$router.replace({
                    path:'/',
                    name:'home'
                  })
                  localStorage.setItem("islogin", "1");
                }else{
                  this.$message.error(result.msg)
                  this.getYZM(4);
                }
              })
            }

          } else {
            this.$message.error("验证码错误")
            // this.$notify.error({
            //   title: "错误",
            //   message: "验证码错误！",
            //   duration: 1000,
            // });
            this.getYZM(4);
          }
        }
      });
    },

    // 生成一个随机数
    getRand(min, max) {
      return parseInt(Math.random() * (max - min + 1)) + min;
    },
    getYZM(num) {
      var yzm = "";
      for (var i = 0; i < num; i++) {
        var rand = this.getRand(48, 122);
        if (
          (rand >= 48 && rand <= 57) ||
          (rand >= 65 && rand <= 90) ||
          (rand >= 97 && rand <= 122)
        ) {
          yzm += String.fromCharCode(rand).toLowerCase();
        } else {
          i--;
        }
      }
      this.qrcode = yzm;
      return yzm;
    },
  },
  created() {
    this.getYZM(4);
  },
};
</script>

<style lang="scss" scoped>
.phone-form-btn {
  width: 100%;
  height: 40px;
  text-align: center;
  background: #f9d532;
  border: 0;
  color: #393939;
  font-weight: 600;
  cursor: pointer;
}
.phone-form-code {
  letter-spacing: 4px;
  font-style: italic;
  cursor: pointer;
}
.el-drawer__body {
  overflow: scroll;
}
/*2.隐藏滚动条，太丑了*/
.el-drawer__container ::-webkit-scrollbar{
  display: none;
}
</style>
